<template>
	<div class="home">
		<el-card class="messageBox">
			<!-- <div class="messageBoxSon" v-for="(item, index) in broadcastInfo" :key="index">第{{ index + 1 }}条消息：{{ item }}</div> -->
			<div class="messageBoxSon">最新更新内容：游客登录、个人头像更换（点击个人中心的头像可进行更换↓）、比赛日程</div>
		</el-card>
		<!-- 用户信息 -->
		<el-row :gutter="15">
			<el-col :md="24" :lg="16" :xl="16" class="mb15">
				<el-card shadow="hover">
					<div slot="header">
						<span>{{ $t('message.card.title1') }}</span>
					</div>
					<div class="user-item">
						<div class="user-item-left">
							<!-- <img :src="getUserInfos.photo" /> -->
							<img @click="dialogVisibleImg = true" :src="userData.imageUrl" alt="" />
						</div>
						<div class="user-item-right overflow">
							<el-row>
								<el-col :span="24" class="right-title mb15 one-text-overflow">{{ currentTime }}，{{ userInfo.userName }} </el-col>
								<el-col :span="24">
									<el-col :xs="12" :sm="12" :md="8" class="right-l-v">
										<div class="right-label">姓名：</div>
										<div class="right-value">{{ userInfo.userName }}</div>
									</el-col>
									<el-col :xs="12" :sm="12" :md="16" class="right-l-v">
										<div class="right-label">身份：</div>
										<div class="right-value">{{ userInfo.otherInfo.flag === true ? '队长' : '队员' }}</div>
									</el-col>
								</el-col>
								<el-col :span="24" class="mt5">
									<el-col :xs="12" :sm="12" :md="8" class="right-l-v">
										<div class="right-label one-text-overflow">擅长辩位：</div>
										<div class="right-value one-text-overflow">{{ userData.position }}</div>
									</el-col>
									<el-col :xs="12" :sm="12" :md="16" class="right-l-v">
										<div class="right-label one-text-overflow">时间：</div>
										<div class="right-value one-text-overflow">{{ userInfo.time }}</div>
									</el-col>
								</el-col>
								<el-col :span="24" class="mt15">
									<el-button size="small" icon="el-icon-edit-outline" @click="dialogVisiblePosition = true">修改辩位 </el-button>
									<el-button size="small" icon="el-icon-edit-outline" @click="dialogVisiblePassword = true">修改密码 </el-button>
								</el-col>
							</el-row>
						</div>
					</div>
				</el-card>
			</el-col>
			<!-- 消息模块 -->
			<el-col :md="24" :lg="8" :xl="8" class="mb15">
				<el-card shadow="hover">
					<div slot="header">
						<span>{{ $t('message.card.title2') }}</span>
						<el-button class="home-card-more" type="text" @click="onOpenGitee">{{ $t('message.card.title3') }}</el-button>
					</div>
					<div class="info">
						<Scroll :data="MessageData" class="info-scroll" :class-option="optionSingleHeight">
							<ul class="info-ul">
								<li v-for="(v, k) in MessageData" :key="k" class="info-item" @click="onNewsInfoListClick(v)">
									<div class="info-item-left" v-text="v.messageContent"></div>
									<div class="info-item-right" v-text="v.messageTitle"></div>
								</li>
							</ul>
						</Scroll>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<!-- 我的资料 -->
		<el-card shadow="hover">
			<div slot="header">
				<span>{{ $t('message.card.title4') }}</span>
				<el-button class="home-card-more" type="text" @click="onOpenGitee">{{ $t('message.card.title5') }}</el-button>
			</div>
			<el-row :gutter="15" class="home-recommend-row">
				<!-- <el-col :sm="24" :md="12" :lg="6" :xl="6" v-for="(v, k) in recommendList" :key="k">
					<div class="home-recommend" :style="{ 'background-color': v.bg }">
						<i :class="v.icon" :style="{ color: v.iconColor }"></i>
						<div class="home-recommend-auto">
							<div>{{ v.title }}</div>
							<div class="home-recommend-msg">{{ v.msg }}</div>
						</div>
					</div>
				</el-col> -->
				<el-col :sm="24" :md="12" :lg="8" :xl="8">
					<div class="home-recommend" style="background-color: rgb(72, 209, 141)">
						<i class="el-icon-video-camera" style="color: rgb(100, 216, 157)"></i>
						<div class="home-recommend-auto">
							<div>上传视频</div>
							<div class="home-recommend-msg">{{ userData.videoNum }}</div>
						</div>
					</div>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="8">
					<div class="home-recommend" style="background-color: rgb(249, 89, 89)">
						<i class="el-icon-document-copy" style="color: rgb(248, 108, 107)"></i>
						<div class="home-recommend-auto">
							<div>上传辩论稿</div>
							<div class="home-recommend-msg">{{ userData.articleNum }}</div>
						</div>
					</div>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="8">
					<div class="home-recommend" style="background-color: rgb(133, 149, 244)">
						<i class="el-icon-tickets" style="color: rgb(146, 161, 244)"></i>
						<div class="home-recommend-auto">
							<div>上传作业</div>
							<div class="home-recommend-msg">{{ userData.homeworkNum }}</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</el-card>

		<!-- 个人信息管理 -->
		<el-card shadow="hover" style="margin-top: 15px">
			<el-tabs v-model="tabsActiveName">
				<el-tab-pane :label="$t('message.card.title10')" name="myMotion">
					<my-motion></my-motion>
				</el-tab-pane>
				<el-tab-pane :label="$t('message.card.title11')" name="myFeedback">
					<my-feedback></my-feedback>
				</el-tab-pane>
				<el-tab-pane :label="$t('message.card.title12')" name="myReview">
					<my-review></my-review>
				</el-tab-pane>
				<el-tab-pane :label="$t('message.card.title13')" name="myVideo">
					<my-video></my-video>
				</el-tab-pane>
				<el-tab-pane :label="$t('message.card.title14')" name="myArticle">
					<my-article></my-article>
				</el-tab-pane>
				<el-tab-pane :label="$t('message.card.title15')" name="myDebateData">
					<my-debate-data></my-debate-data>
				</el-tab-pane>
				<el-tab-pane :label="$t('message.card.title16')" name="myForumPost">
					<my-forum-post></my-forum-post>
				</el-tab-pane>
			</el-tabs>
		</el-card>
		<!-- 修改辩位弹出框 -->
		<el-dialog title="修改辩位" :visible.sync="dialogVisiblePosition" width="30%" :before-close="handleClose">
			<el-form :rules="rules" :model="updatePosition" ref="updatePosition"
				><el-form-item prop="position"
					><el-descriptions class="margin-top" size="small" :column="3" border>
						<el-descriptions-item label="辩位">
							<el-select v-model="updatePosition.position">
								<el-option v-for="item in position" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" />
							</el-select>
						</el-descriptions-item> </el-descriptions></el-form-item
			></el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisiblePosition = false">取 消</el-button>
				<el-button type="primary" @click="transitionPosition">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 修改辩Wie弹出框结束 -->
		<!-- 修改密码弹出框 -->
		<el-dialog title="修改密码" :visible.sync="dialogVisiblePassword" width="30%" :before-close="handleClose">
			<el-form :rules="rules" :model="updatePassword" ref="updatePassword">
				<el-form-item prop="oldPassword"
					><el-descriptions class="margin-top" size="small" :column="1" border>
						<el-descriptions-item label="原密码">
							<el-input v-model="updatePassword.oldPassword" placeholder="请输入原密码"></el-input> </el-descriptions-item
					></el-descriptions> </el-form-item
				><el-form-item prop="newPassword"
					><el-descriptions class="margin-top" size="small" :column="1" border
						><el-descriptions-item label="新密码">
							<el-input v-model="updatePassword.newPassword" placeholder="请输入新密码"></el-input> </el-descriptions-item></el-descriptions
				></el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisiblePassword = false">取 消</el-button>
				<el-button type="primary" @click="transitionPassword">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 更换头像 -->
		<el-dialog title="更换头像" center :visible.sync="dialogVisibleImg" width="30%">
			<div class="dialogImg">
				<img style="height: 100px; width: 100px" :src="userData.imageUrl" alt="" />
			</div>
			<span slot="footer" class="dialog-footer">
				<el-upload
					class="upload-demo"
					ref="upload"
					:action="changeImgRequest"
					:auto-upload="false"
					:on-success="changeSuccess"
				>
					<el-button slot="trigger" size="small" type="primary">选择新头像</el-button>
					<el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">确定上传</el-button>
				</el-upload>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import Scroll from 'vue-seamless-scroll';
import { CountUp } from 'countup.js';
import { Session } from '@/utils/storage';
import { formatAxis, formatDate } from '@/utils/formatTime';
import { recommendList, chartsRightList, newsInfoList, dailyMessage } from './mock';
import { getuserInfo, getMyMessage, getBroadcast } from '@/api/getMessage/index.js';
import { transitionPosition, transitionPassword } from '@/api/userInfo/index.js';
import MyMotion from './component/myMotion.vue';
import myFeedback from './component/myFeedback.vue';
import myReview from './component/myReview.vue';
import myArticle from './component/myArticle.vue';
import myDebateData from './component/myDebateData.vue';
import myVideo from './component/myVideo.vue';
import myForumPost from './component/myForumPost.vue';
export default {
	name: 'personal',
	components: { Scroll, MyMotion, myFeedback, myReview, myArticle, myDebateData, myVideo, myForumPost },
	data() {
		return {
			recommendList,
			chartsRightList,
			newsInfoList,
			userInfo: {},
			dailyMessage: {},
			userData: {},
			tabsActiveName: 'myMotion',
			updatePosition: {
				id: Session.get('userInfo').otherInfo.id,
				position: '',
			},
			// 修改辩位弹窗控制
			dialogVisiblePosition: false,
			position: [
				{ value: '一辩', label: '一辩', disabled: false },
				{ value: '二辩', label: '二辩', disabled: false },
				{ value: '三辩', label: '三辩', disabled: false },
				{ value: '四辩', label: '四辩', disabled: false },
			],
			// 修改密码弹窗控制
			dialogVisiblePassword: false,
			updatePassword: {
				id: Session.get('userInfo').otherInfo.id,
				oldPassword: '',
				newPassword: '',
			},
			// 表单控制
			rules: {
				position: [{ required: true, message: '请选择辩位', trigger: 'change' }],
				oldPassword: [
					{ required: true, message: '请输入原密码', trigger: 'blur' },
					{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
				],
				newPassword: [
					{ required: true, message: '请输入新密码', trigger: 'blur' },
					{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
				],
			},
			// 用于获取消息通知
			getMessageData: {
				id: Session.get('userInfo').otherInfo.id,
				pageNum: 1,
				pageSize: 8,
			},
			MessageData: [],
			broadcastInfo: [],
			dialogVisibleImg: false,
			changeImgRequest:`http://175.178.222.176:9199/user/upload?userid=${Session.get('userInfo').otherInfo.id}`,
		};
	},
	created() {
		this.initUserInfo();
		this.initDailyMessage();
		this.getUserData();
		this.getMessage();
		this.getBroadcastInfo();
	},
	computed: {
		currentTime() {
			return formatAxis(new Date());
		},
		optionSingleHeight() {
			return {
				singleHeight: 28,
				limitMoveNum: 8,
				waitTime: 2000,
			};
		},
		// getUserInfos() {
		// 	return this.$store.state.userInfos.userInfos;
		// },
	},
	methods: {
		// 获取用户对应信息
		async getUserData() {
			let res = await getuserInfo(this.userInfo.otherInfo.id);
			if (res.flag) {
				this.userData = res.data;
				this.banPostion();
			} else {
				this.$message.error('获取错误');
			}
		},

		// 触发弹窗禁用选项
		banPostion() {
			// console.log(this.userData.position)
			for (var i = 0; i < this.position.length; i++) {
				if (this.userData.position == this.position[i].value) {
					this.position[i].disabled = true;
					return;
				}
			}
		},

		// 修改辩位
		transitionPosition() {
			this.$refs.updatePosition.validate(async (valid) => {
				if (valid) {
					let res = await transitionPosition(this.updatePosition);
					if (res.statusCode === 20000) {
						this.$message.success(res.message);
						this.updatePosition.position = '';
						this.getUserData();
						this.dialogVisiblePosition = false;
					} else {
						this.$message.error(res.message);
						this.dialogVisiblePosition = false;
					}
				} else {
					return false;
				}
			});
		},
		// 修改密码
		transitionPassword() {
			// console.log(this.$refs)
			this.$refs.updatePassword.validate(async (valid) => {
				if (valid) {
					let res = await transitionPassword(this.updatePassword);
					if (res.statusCode === 20000) {
						this.$message.success(res.message);
						this.updatePassword.oldPassword = '';
						this.updatePassword.newPassword = '';
						this.getUserData();
						this.dialogVisiblePassword = false;
					} else {
						this.updatePassword.oldPassword = '';
						this.updatePassword.newPassword = '';
						this.$message.error(res.message);
						this.dialogVisiblePassword = false;
					}
				} else {
					return false;
				}
			});
		},
		// 获取消息
		async getMessage() {
			let res = await getMyMessage(this.getMessageData);
			if (res.statusCode === 20000) {
				this.MessageData = res.data.records;
			}
		},
		// 获取广播消息
		async getBroadcastInfo() {
			let res = await getBroadcast(this.getMessageData);
			if (res.statusCode === 20000) {
				this.broadcastInfo = res.data.records;
			}
		},
		submitUpload() {
			this.$refs.upload.submit();
		},
		changeSuccess(res) {
			if (res.statusCode === 20000) {
				this.$message.success(res.message)
				this.dialogVisibleImg = false
				this.getUserData()
			}else {
				this.$message.error(res.message)
				this.dialogVisibleImg = false
			}
		},
		// 初始化数字滚动
		initNumCountUp() {
			this.$nextTick(() => {
				new CountUp('titleNum1', Math.random() * 100000).start();
				new CountUp('titleNum2', Math.random() * 100000).start();
				new CountUp('titleNum3', Math.random() * 100000).start();
			});
		},
		// 随机语录
		initDailyMessage() {
			this.dailyMessage = dailyMessage[Math.floor(Math.random() * dailyMessage.length)];
		},
		// 初始化登录信息
		initUserInfo() {
			if (!Session.get('userInfo')) return false;
			this.userInfo = Session.get('userInfo');
			this.userInfo.time = formatDate(new Date(this.userInfo.time), 'YYYY-mm-dd HH:MM:SS');
		},
		// 消息通知当前项点击
		onNewsInfoListClick(v) {
			window.open(v.link);
		},
		// 跳转到 gitee
		onOpenGitee() {
			window.open('https://gitee.com/lyt-top/vue-next-admin');
		},

		// 弹窗关闭控制
		handleClose(done) {
			this.$confirm('确认关闭？')
				.then((_) => {
					done();
				})
				.catch((_) => {});
		},
	},
};
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
